﻿@page "/tree-grid/cell-edit-type"

@using Syncfusion.Blazor.TreeGrid
@using Syncfusion.Blazor.Inputs 

@*Hidden:Lines*@
@using ej2_blazor_wrapdata
@inherits SampleBaseComponent;
@*End:Hidden*@

<SampleDescription>
    <p>This sample demonstrates the supported cell edit types of Tree Grid columns. The list of cell edit types are as follows,</p>
    <ul><li><code>NumericTextBox</code> component for integers, double, and decimal data types.</li>
        <li><code>DefaultEdit</code> component for string data type.</li>
        <li><code>DropDownList</code> component for list data type.</li>
        <li><code>DatePicker</code> component for date data type.</li>
        <li><code>DateTimePicker</code> component for dateTime data type.</li>
        <li><code>Checkbox</code> component for boolean data type</li>
    </ul>
</SampleDescription>
<ActionDescription>
   <p>In this sample, we show the following editTypes for the Tree Grid columns.</p>
   <p>The available modes are,</p>
    <ul>
        <li><code>NumericTextBox </code></li>
        <li><code>DropDownList</code></li>
        <li><code>DatePicker</code></li>
        <li><code>DefaultEdit</code></li>
        <li><code>Checkbox</code></li>
        </ul>
    <p>More information on the cell edit type can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/treegrid/edit/#cell-edit-type-and-its-params'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
             <SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" Height="315" TreeColumnIndex="1" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })">
                <TreeGridPageSettings PageSize="2"></TreeGridPageSettings>
                <TreeGridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Row" ShowDeleteConfirmDialog="true"></TreeGridEditSettings>
                <TreeGridColumns>
                    <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" ValidationRules="@(new Syncfusion.Blazor.Grids.ValidationRules() { Required = true, Number = true })" IsPrimaryKey="true" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" EditType="Syncfusion.Blazor.Grids.EditType.NumericEdit"></TreeGridColumn>
                    <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="220" ValidationRules="@(new Syncfusion.Blazor.Grids.ValidationRules() { Required = true })" EditType="Syncfusion.Blazor.Grids.EditType.DefaultEdit"></TreeGridColumn>
                    <TreeGridColumn Field="StartDate" HeaderText="Start Date" Format="d" Type=Syncfusion.Blazor.Grids.ColumnType.Date Width="109" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" EditType=Syncfusion.Blazor.Grids.EditType.DatePickerEdit></TreeGridColumn>
                    <TreeGridColumn Field="Approved" HeaderText="Approved" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" EditType="Syncfusion.Blazor.Grids.EditType.BooleanEdit" DisplayAsCheckBox="true"></TreeGridColumn>
                    <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100"  EditType="Syncfusion.Blazor.Grids.EditType.DefaultEdit" ></TreeGridColumn>
                    <TreeGridColumn Field="Priority" HeaderText="Priority" Width="100" EditType="Syncfusion.Blazor.Grids.EditType.DropDownEdit"></TreeGridColumn>
                </TreeGridColumns>
            </SfTreeGrid>
        </div>
    </div>
</div>

@code {
    public List<WrapData> TreeData { get; set; }

    
    protected override void OnInitialized()
    {
        this.TreeData = WrapData.GetWrapData().ToList();

    }

}
